<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
/*box-sizing：三种形式
 			：content-box----只包含内容
 			：padding-box----内边距+内容
 			：border-box-----边框+内边距+内容*/		
		    *{
		    	 -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                         box-sizing: border-box;
		    }
		
			.aaa{
				width: 1000px;	
				height: 500px;
				background: yellow;
				}

/*直接设置内容+padding+border为一个固定值或比例
 这样添加padding、border就不会撑破盒子*/	
 
/*同时使用box-sizing和calc设置盒子，先用box-sizing设置可视区域（内容、内边距、边框），在用calc设置外边距*/			
			.bbb{
				width:calc(25% - 20px);
				height: 100%;
                background: red;
                float: left;
				padding:20px;
				border: 5px solid blue;
				margin: 0 10px;
			}	
			
			.ccc{
				width: 100%;height: 100%;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="aaa">
			<div class="bbb">
				<div class="ccc"></div>
			</div>
			<div class="bbb">
				<div class="ccc"></div>
				
			</div>
			<div class="bbb">
				<div class="ccc"></div>
				
			</div>
			<div class="bbb">
				<div class="ccc"></div>
				
			</div>
		</div>
	</body>
</html>
